<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <my-product
      title="好吃的口水鸡"
      price="50"
      intro="开业大酬宾, 全场8折"
    ></my-product>
    <my-product title="北京烤鸭" price="100" intro="开业大酬宾, 全场1折">
      ></my-product
    >
    <my-product title="超级无敌的冰激凌" price="100" :intro="msg"></my-product>
  </div>
</template>

<script>
//引入组件
import MyProduct from "./components/MyProduct.vue";
export default {
  //注册组件
  components: { MyProduct },
  data() {
    return {
      msg: "现在免费",
    };
  },
};
</script>

<style>
</style>